// *** GUI OBJECT *** //
// Controls the Graphical User Interface(GUI) for the game
//
// @project: GoldenShield
// @author: Anders Ipsen
// @version: 1.0

var guiObject = {
    writingText: false, //Boolean value, is true when the GUI is writing text to screen
    
    //Appends the different gui elements to the SCENE object, and updates it with the latest data.
    showGui: function() {
        var barLength = this.calcLife();
        var jewelLength = this.calcJewels();
        var evilHpLength = this.calcEvilLife();
                    //gui divs
        $('#scene').append("<div id='gui'></div>");
        $('#gui').css({position: 'relative', zIndex: '100', height: '54px', width: '277px', top: '546px', left: '523px', backgroundImage: "url('img/gui/hud.png')"});
                    //life divs
        $('#scene').append("<div id=heartsEmpty></div>");
        $('#heartsEmpty').css({position: 'relative', zIndex: '101', height: '30px', width: '161px', left: '625px', top: '508px', backgroundImage: "url('img/gui/heartsEmpty.png')"});
        $('#scene').append("<div id='heartsFull'></div>");
        $('#heartsFull').css({position: 'relative', zIndex: '102', height: '30px', width: barLength + 'px', left: '625px', top: '477px', backgroundImage: "url('img/gui/heartsFull.png')"});
                    //jewel divs
        $('#gui').append("<div id='jewelCounter'></div>");
        $('#jewelCounter').css({backgroundImage: "url('img/gui/jewelCounter.png')",position: 'absolute', backgroundPosition: '0px ' + jewelLength + 'px', left: '46px', top: '12px', height: '35px', width: '30px'});
        $('#scene').append("<div id='textBox'><p id='textBoxP'></p></div>");
        $('#textBox').css({top: '374px', left: '396px', display: 'none', height: '175px', width: '400px', zIndex: '118', position: 'absolute', backgroundImage: "url('img/gui/textBox1.png')"});
        
        //Update gui
        this.updateGui();
    },
    
    //calculates the number of lifes and converts it into pixel
    calcLife: function() {
        var barLength = player.health * 32;
        return barLength;
    },
    
    //calculates enemy life and converts it into pixel
    calcEvilLife: function(life) {
          var evilHpLength = life * 4;
          return evilHpLength;
    },
    //Adds a new evil lifebar
    addEvilLifeBar: function(object, life) {
        var lifebarPosX = parseInt($('#' + object).css("left"));
        var lifebarPosY = parseInt($('#' + object).css("top")) - 10;
        var id = $('#' + object).attr("id");
        var evilHpEmpty = "evilHpEmpty-" + id;
        var evilHpFull = "evilHpFull-" + id;
        var pxLife = this.calcEvilLife(life);
        //life bar divs
        $('#charectors').append("<div id='" + evilHpEmpty + "'></div>");
        $('#' + evilHpEmpty).css({position: 'absolute', left: lifebarPosX + "px", top: lifebarPosY + "px", zIndex: '11', width: '41px', height: '9px', backgroundImage: 'url("img/object/healthBarEmpty.png")'});
        $('#charectors').append("<div id=" + evilHpFull + "></div>");
        $('#' + evilHpFull).css({position: 'absolute', left: lifebarPosX + "px", top: lifebarPosY + "px", zIndex: '11', width: pxLife + 'px', height: '9px', backgroundImage: 'url("img/object/healthBar.png")' });
    },
    
    //Updates the lifebar
    updateEvilLifeBar: function(object, life) {
        var id = $('#' + object).attr("id");
        var evilHpFull = "evilHpFull-" + id;
        var pxLife = this.calcEvilLife(life);
        $('#' + evilHpFull).css({width: pxLife + 'px'});
    },
    
    //removes bar after enemy death
    removeLifeBar: function(object) {
        var id = $('#' + object).attr("id");
        var evilHpEmpty = "evilHpEmpty-" + id;
        var evilHpFull = "evilHpFull-" + id;
        $('#' + evilHpFull).fadeOut(function() {$(this).remove()});
        $('#' + evilHpEmpty).fadeOut(function() {$(this).remove()});
    },
    
    //updating the GUI
    updateGui: function() {
        var barLength = this.calcLife();
        $('#heartsFull').css({width: barLength + 'px'});
        $('#jewels').html('x' + player.jewels);
        var jewelLength = this.calcJewels();
        $('#jewelCounter').css({backgroundPosition: '0px ' + jewelLength + 'px'});
    },
    
    //calculates number of jewels and converts it into pixel
    calcJewels: function() {
        var jewelLength = player.jewels * -35;
        return jewelLength;
    },
    
    //prints character messages to screen
    showMessage: function(str) {
        if(this.writingText == false) {
        var splitText = str.split("");
        var htmlString = '';
        var splitTextLength = splitText.length - 1;
        var nowChar = 0;
        var func = function(){
            htmlString += splitText[nowChar];
            $('#textBox p').html(htmlString);
            if(nowChar < splitTextLength) {
                nowChar++;
                guiObject.writingText = true;
            }else{
                clearInterval(textInterval);
                guiObject.writingText = false;
            }
        }
        var textInterval = setInterval(func,25);
        $('#textBox p').css({position: 'absolute', width: '313px', height: '100px', top: '36px', left: '40px', fontFamily: 'Courier New', fontWeight: 'bolder', fontSize: '150%'});
        $('#textBox').css({display: 'block'});
        }
    },
    
    //removes character messages
    removeMessage: function() {
        $('#textBox').css({display: 'none'});
    }
};